<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GabrielxD's Secret Base</title>
    <!-- 网站图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 导入字体 -->
    <link rel="stylesheet" type="text/css"
        href="https://fonts.font.im/css?family=Comfortaa&amp;subset=cyrillic,cyrillic-ext,greek,latin-ext" />
    <link rel="stylesheet" type="text/css" href="https://fonts.font.im/css?family=Source+Sans+Pro" />
    <!-- fontawesome 字体图标 -->
    <!-- <script src="https://kit.fontawesome.com/d30ee37b07.js" crossorigin="anonymous"></script> -->
    <link rel="stylesheet" href="fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/common.js"></script>
</head>

<body>
    <div class="app" id="app">
        <header class="top-navbar">
            <div class="left">
                <a class="toggle-aside-btn" id="toggle-aside">
                    <i class="fas fa-bars"></i>
                </a>
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="输入关键词搜索..." />
                    <button class="search-btn">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="right">
                <div class="music-player">
                    <div class="music-cover">
                        <img src="upload/music_cover/music01.jpg" />
                    </div>
                    <div class="music-player-info">
                        <div class="music-info">
                            <span class="music-title">終点の先が在るとするならば。</span>
                            <span class="music-author"> - ツユ</span>
                        </div>
                        <div class="music-control">
                            <div class="play-control clearfix">
                                <button class="left prev">
                                    <i class="fas fa-backward"></i>
                                </button>
                                <button class="left toggle-pause">
                                    <i class="fas fa-pause"></i>
                                </button>
                                <button class="left next">
                                    <i class="fas fa-forward"></i>
                                </button>
                                <button class="right volume">
                                    <i class="fas fa-volume-up"></i>
                                    <div class="volume-bar">
                                        <div class="volume-size"></div>
                                    </div>
                                </button>
                            </div>
                            <div class="progress-bar">
                                <div class="fake-progress-bar"></div>
                                <div class="progress">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <audio src="media/audio/music01.mp3"></audio>
                </div>
                <a href="login.html" class="login"><i class="fas fa-sign-in-alt"></i>登录</a>
                <a href="register.html" class="register"><i class="fas fa-user-plus"></i>注册</a>
            </div>
        </header>
        <aside class="left-aside">
            <a href="index.html" title="GabrielxD's Playground" class="brand">
                <i class="fas fa-carrot"></i>
                <span class="text">GabrielxD</span>
            </a>
            <div class="wrapper">
                <div class="host">
                    <div class="logo">
                        <h1>
                            <a href="index.html">
                                <img src="image/logo.png">
                            </a>
                        </h1>
                    </div>
                    <div class="text">
                        <strong data-unfold-text="珈百璃" data-folded-text="Gab">珈百璃</strong>
                        <p>MOE IS JUSTICE!</p>
                    </div>
                </div>
                <div class="separation"></div>
                <ul class="navigation">
                    <li class="title">
                        <span>导航</span>
                    </li>
                    <li>
                        <a href="index.html">
                            <i class="fas fa-home item-icon"></i>
                            <span>主页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-info-circle item-icon"></i>
                            <span>关于本站</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md"
                            target="_blank">
                            <i class="fas fa-question-circle item-icon"></i>
                            <span>提问的智慧</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="fas fa-cubes item-icon"></i>
                            <span>一些小作品</span>
                            <i class="fas fa-angle-right toggle-fold"></i>
                        </a>
                        <ul class="sub-nav">
                            <li>
                                <a href="https://gabrielxd.gitee.io/todo-list/" target="_blank">
                                    <i class="fas fa-check-circle item-icon"></i>
                                    <span>待办清单</span>
                                </a>
                            </li>
                            <li>
                                <a href="http://gabrielxd.gitee.io/feelfreetrip_mobile/" target="_blank">
                                    <i class="fas fa-plane-departure item-icon"></i>
                                    <span>随便旅旅</span>
                                </a>
                            </li>
                            <li>
                                <a href="http://gabrielxd.gitee.io/heimamm/" target="_blank">
                                    <i class="fas fa-terminal item-icon"></i>
                                    <span>黑马面面</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="separation"></div>
                <ul class="others">
                    <li class="title">
                        <span>其它</span>
                    </li>
                    <li>
                        <a href="https://twitter.com/home">
                            <i class="fab fa-youtube item-icon"></i>
                            <span>Youtube</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.youtube.com/">
                            <i class="fab fa-twitter item-icon"></i>
                            <span>Twitter</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-cubes item-icon"></i>
                            <span>正经的东西</span>
                            <i class="fas fa-angle-right toggle-fold"></i>
                        </a>
                        <ul class="sub-nav">
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>看起来</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>这里并没有</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>什么正经的</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle item-icon"></i>
                                    <span>东西呢</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-home item-icon"></i>
                            <span>不正经的东西</span>
                            <i class="fas fa-angle-right toggle-fold"></i>
                        </a>
                        <ul class="sub-nav">
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>看起来</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>这里也没有</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>什么不正经的</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fas fa-question-circle fa-rotate-180 item-icon"></i>
                                    <span>东西呢</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <a class="back-top">
                <img src="image/back_top.png">
                <div class="tip">返回顶部</div>
            </a>
        </aside>
        <main class="main-content">
            <div class="wrapper">
                <div class="login-box">
                    <div class="left">
                        <form action="">
                            <h2 class="title">登&nbsp;&nbsp;录</h2>
                            <input type="text" name="username" id="username" placeholder="用户名" />
                            <input type="password" name="password" id="password" placeholder="密码" />
                            <div class="check">
                                <input type="checkbox" id="remember-check" />
                                <label for="remember-check">记住我</label>
                                <a href="#" class="right">忘记密码？</a>
                            </div>
                            <button class="login-btn">登录</button>
                            <div class="separation"></div>
                            <div class="or">
                                <a href="https://passport.bilibili.com/login" style="background-color: #00a0d8"
                                    alt="哔哩哔哩"><img src="upload/login/bilibili.png" /></a>
                                <a href="https:https://twitter.com/home/login" style="background-color: #1da1f2"
                                    alt="Twitter"><img src="upload/login/twitter.png" /></a>
                                <a href="https://weibo.com/login.php" style="background-color: #e02327" alt="微博"><img
                                        src="upload/login/weibo.png" /></a>
                                <a href="https://web.wechat.com/" style="background-color: #07c160" alt="微信"><img
                                        src="upload/login/wechat.png" /></a>
                            </div>
                            <p class="notice">
                                还没有账号？<a href="register.html">注册</a>
                            </p>
                        </form>
                    </div>
                    <div class="right"></div>
                </div>
                <footer class="footer">
                    <span class="left">&copy; 2021 Copyright&nbsp;|&nbsp;Made with ❤️ by
                        <a href="https://space.bilibili.com/12270873" target="_blank">GabrielxD</a></span>
                    <span class="right">Powered by
                        <a href="http://vanilla-js.com/" target="_blank">Vanilla.js</a>&nbsp;|&nbsp;Refer to
                        <a href="https://www.ihewro.com/archives/489/" target="_blank">handsome</a></span>
                </footer>
            </div>
        </main>
    </div>
</body>

</html>